<template>
  <div class='tableListBox' ref='tableListBox'>
    <div class='thead'>
      <table
        class='tableListBox_table'
        border='0'
        cellpadding='0'
        cellspacing='0'
        width='100%'
      >
        <thead>
        <tr
          :style='theadTrStyle'
        >
          <th v-for='(item) in keys' :key='item.name'>{{ item.name }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for='(item, index) in list' :key='index'>
          <td class='type' :title='item[th.key]' v-for='(th) in keys' :key='th.name'
          >
            <TextOverflowScroll :text='item[th.key]'>{{ item[th.key] }}</TextOverflowScroll>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class='tbody'>
      <ScrollBox
        :close="scrollLock"
      >
        <table
          class='tableListBox_table'
          border='0'
          cellpadding='0'
          cellspacing='0'
          width='100%'
        >
          <thead>
          <tr>
            <th v-for='(item) in keys' :key='item.name'>{{ item.name }}</th>
          </tr>
          </thead>
          <tbody>
          <slot></slot>
          </tbody>
        </table>
      </ScrollBox>
    </div>
    <div class='tfoot' v-if='tfoot'>
      <table
        class='tableListBox_table'
        border='0'
        cellpadding='0'
        cellspacing='0'
        width='100%'
      >
        <thead>
        <tr>
          <th v-for='(item) in keys' :key='item.name'>{{ item.name }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for='(item, index) in list' :key='index'>
          <td class='type' :title='item[th.key]' v-for='(th) in keys' :key='th.name'
          >
            <TextOverflowScroll :text='item[th.key]'>{{ item[th.key] }}</TextOverflowScroll>
          </td>
        </tr>
        </tbody>
        <slot name='tfoot'></slot>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    keys: {
      // key, name
      type: Array,
      default: () => ([])
    },
    tfoot: {
      type: Boolean,
      default: false
    },
    scrollLock: {
      type: Boolean,
      default: false
    },
    theadTrStyle: {
      type: [Object, String],
      default: () => ({})
    }

  }
}
</script>

<style lang='scss' scoped>
.tableListBox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: relative;
  transform-origin: top;
  opacity: 1;
  font-size: 12px;
  color: #fff;
  line-height: 40px;
  table {
    table-layout: fixed;
  }
  th, td {
    width: auto !important;
    text-align: center;
  }
  .thead {
    height: 52px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    th {
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    tbody {
      visibility: hidden;
    }
  }
  .tbody {
    width: 100%;
    max-width: 100%;
    height: calc(100% - 52px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    table {
      margin-top: -41px;
      border-collapse: collapse;
    }
    thead {
      visibility: hidden;
      th {
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .tableListBox_table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0 12px;
  }
}
</style>
